<template>
  <div>
    <el-table
      v-loading="listLoading"
      :data="road"
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="道路编号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.road.roadID }}</span>
        </template>
      </el-table-column>
      <el-table-column label="道路名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.road.roadName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="通行方向" align="center">
        <template slot-scope="{row}">
          <span>{{ row.road.roadDirection }}</span>
        </template>
      </el-table-column>
      <el-table-column label="起点" align="center">
        <template slot-scope="{row}">
          <span>{{ row.road.startPoint }}</span>
        </template>
      </el-table-column>
      <el-table-column label="终点" align="center">
        <template slot-scope="{row}">
          <span>{{ row.road.endPoint }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设计单位" align="center">
        <template slot-scope="{row}">
          <span>{{ row.road.designUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="建造单位" align="center">
        <template slot-scope="{row}">
          <span>{{ row.road.constructionUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="道路类型" align="center">
        <template slot-scope="{row}">
          <span>{{ row.road.roadTypeID | roadTypeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="道路等级" align="center">
        <template slot-scope="{row}">
          <span>{{ row.road.roadLevel }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="审核状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="auditStatusFilter(row.roadAudit.auditStatus)">
            {{ row.roadAudit.auditStatus | auditFilter2 }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="100" align="center">
        <template slot-scope="{row}">
          <el-popover
            :ref="row.road.roadID"
            trigger="click"
            placement="top"
            width="210"
          >
            <div style="text-align: center">
              <el-button round type="success" size="mini" @click="status1(row)">通过</el-button>
              <el-button round type="danger" size="mini" @click="status2(row)">不通过</el-button>
            </div>
            <el-button slot="reference" :disabled="row.road.roadwayID===null" size="small" :type="auditStatusFilter(row.roadAudit.auditStatus)" icon="el-icon-lock" circle />
          </el-popover>
          <el-button type="info" size="small" icon="el-icon-more" circle @click="handleRoadway1(row.road)" />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="详细信息"
      :visible.sync="dialogRoadWayVisible"
      width="60%"
    >
      <RoadDetail v-if="dialogRoadWayVisible" :road-way="roadDetail.roadway" :road="roadDetail.road" />
    </el-dialog>
  </div>
</template>

<script>
import { searchRoad, updateRoad } from '@/api/road'
import { mapGetters } from 'vuex'
import RoadDetail from '@/views/roadAudit/components/RoadDetail'
export default {
  name: 'RoadAudit1',
  components: { RoadDetail },
  filters: {
    roadTypeFilter(roadType) {
      switch (roadType) {
        case 1: return '快速路'
        case 2: return '主干路'
        case 3: return '广场'
        case 4: return '商业繁华街道'
        case 5: return '重要生产区道路'
        case 6: return '外事活动路线'
        case 7: return '游览路线'
        case 8: return '次干路'
        case 9: return '步行街'
        case 10: return '支路中的商业街道'
        case 11: return '其他支路'
      }
    },
    auditFilter2(audit) {
      switch (audit) {
        case 0: return '未审核'
        case 1: return '通过'
        case 2: return '未通过'
      }
    },
    timefiler(time) {
      return time.year + '-' + time.month
    }
  },
  data() {
    return {
      radio: 3,
      listLoading: true,
      road: [],
      dialogRoadWayVisible: false,
      dialogFacilityVisible: false,
      dialogStatusVisible: false,
      roadFacility: {},
      roadDetail: {
        road: {},
        roadway: {}
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'departmentId'
    ])
  },
  created() {
    this.getAllRoad()
  },
  methods: {
    auditStatusFilter(audit) {
      switch (audit) {
        case 0: return 'primary'
        case 1: return 'success'
        case 2: return 'danger'
      }
    },
    status1(row) {
      updateRoad({ updateType: 8, roadAuditID: row.roadAudit.roadAuditID, roadID: row.road.roadID, departmentID: row.roadAudit.departmentID, auditStatus: 1 }).then(() => {
        this.$message({
          message: '成功',
          type: 'success'
        })
      })
      row.roadAudit.auditStatus = 1
      this.$refs[row.road.roadID].doClose()
    },
    status2(row) {
      updateRoad({ updateType: 8, roadAuditID: row.roadAudit.roadAuditID, roadID: row.road.roadID, departmentID: row.roadAudit.departmentID, auditStatus: 2 }).then(() => {
        this.$message({
          message: '成功',
          type: 'success'
        })
      })
      row.roadAudit.auditStatus = 2
      this.$refs[row.road.roadID].doClose()
    },
    handleAudit(row) {
      this.radio = row.roadAudit.auditStatus
      this.dialogStatusVisible = true
    },
    test() {
      console.log(this.roadway)
    },
    getList() {
      this.listLoading = false
    },
    handleRoadway1(road) {
      this.roadDetail.road = road
      searchRoad({ searchType: 2, roadwayID: road.roadwayID }).then(response => {
        this.roadDetail.roadway = response
        this.dialogRoadWayVisible = true
      }).catch(() => {
        this.roadDetail.roadway = null
        this.dialogRoadWayVisible = true
      })
    },
    handleFacility1(affiliatedFacilityID) {
      searchRoad({ searchType: 5, affiliatedFacilityID: affiliatedFacilityID }).then(response => {
        this.roadFacility = response
        this.dialogFacilityVisible = true
        this.$message({
          message: '成功获取该附属设施信息',
          type: 'success'
        })
      })
    },
    getAllRoad() {
      searchRoad({ searchType: 1, superpower: 1, auditStatus: 1 }).then(response => {
        this.road = response
        this.$message.success('已刷新道路审核列表')
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    }
  }
}
</script>
